<template>
    <div class="searchResult">
        <!--搜索总数-->
        <div class="total">
            搜索<span class="keywords">{{$route.query.keywords}}</span>,找到{{totalNum}}
        </div>
        <div class="head">
            <navbar :navList ="navList" />
        </div>
        <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
import navbar from '../../components/common/navbar/navbar'
export default {
    name: '',
    props: [

    ],
    data() {
        return {
            // 导航列表
            navList:[
                {title:'单曲'},
                {title:'歌手'},
                {title:'专辑'},
                {title:'视频'},
                {title:'歌单'},
                {title:'歌词'},
                {title:'主播电台'},
                {title:'用户'},
            ],
            totalNum:this.$route.query.totalNum,
            isRouterAlive: true,
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {
        // 监听路由以改变搜索结果
        '$route':function(){
            console.log('route 更新')
            this.isRouterAlive = false
            this.$nextTick(() => {
                this.isRouterAlive = true
            })
        }
    },
    methods: {

    },
    components: {
        navbar,
    },
};
</script>

<style scoped lang="less">
@mainColor:#2f3640;
@itemecolor:#fbc531;
@navLightColor:#273c75;
@textColor:#fff;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.searchResult{
    width: 100%;
    color: @textColor;
    height: calc(100vh - 49px * 2);
    background-color: @mainColor;
    overflow: auto;
    .total{
        margin-top: 40px;
        padding-left: 40px;
        .keywords{
            color: #00a8ff; 
        }
    }
    .head{
        width: 100%;
        height: 42px;
        
        border-bottom: 1px solid #e1e1e2;
    }
}
</style>
